<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Social TV</title>
  <link href="/static/css/reset.css" rel="stylesheet" type="text/css" />
  <link href="/static/css/style.css" rel="stylesheet" type="text/css" />
  <link href="/static/js/jquery.wysiwyg.css" rel="stylesheet" type="text/css" />
  <link type="text/css" media="screen" rel="stylesheet"
      href="/static/js/colorbox.css" />
  <link type="text/css" media="screen" rel="stylesheet"
      href="/static/js/colorbox-custom.css" />

  <style type="text/css">
    div.wysiwyg ul.panel li {
      padding:0px !important;
    } /**textarea visual editor padding override**/
  </style>
  <!--[if IE 6]>
    <link rel="stylesheet" href="/static/css/ie.css" type="text/css" />
  <![endif]-->
  <!--[if IE]>
    <link type="text/css" media="screen" rel="stylesheet"
        href="/static/js/colorbox-custom-ie.css" title="Social TV" />
  <![endif]-->

  <script type="text/javascript" src="/static/js/jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="/static/js/jquery.colorbox-min.js">
  </script>
  <script type="text/javascript" src="/static/js/jquery.ui.js"></script>
  <script type="text/javascript" src="/static/js/jquery.corners.min.js">
  </script>
  <script type="text/javascript" src="/static/js/bg.pos.js"></script>
  <script type="text/javascript" src="/static/js/jquery.wysiwyg.js"></script>

  <script src="/static/js/tabs.pack.js" type="text/javascript"></script>
  <script type="text/javascript" src="/static/js/socialtv.js"></script>

</head>

<body>
<div id="container">
  <div class="hidden">
    <!-- the modal box container - this div is hidden until it is called from a
         modal box trigger. see socialtv.js for details -->
    <div id="sample-modal">
      <h2 style="font-size:160%; font-weight:bold; margin:10px 0;">
        Modal Box Content
      </h2>
      <p>Place your desired modal box content here</p>
    </div>
  </div><!-- end of hidden -->
  <div id="header">
    <div id="top">
      <h1><a href="#">Social TV</a></h1>
      <p id="userbox">
        Hello <strong>John Doe</strong> &nbsp;|
        &nbsp;<a href="#">Settings</a> &nbsp;|
        &nbsp;<a href="#">Logout</a> <br />
        <small>Last Login: 12 May 2009</small>
      </p>
      <span class="clearFix">&nbsp;</span>
    </div>
    <ul id="menu">
      <li class="selected"><a href="#">Dashboard</a></li>
      <li>
        <a class="top-level" href="#">Users <span>&nbsp;</span></a>
        <ul>
          <li><a href="#">Add User</a></li>
          <li><a href="#">Edit Users</a></li>
        </ul>
      </li>
      <li><a href="#">Pages</a></li>
      <li><a href="#">Modules</a></li>
      <li>
        <a class="top-level" href="#">Settings <span>&nbsp;</span></a>
        <ul>
          <li><a href="#">Site Settings</a></li>
          <li><a href="#">File Paths</a></li>
          <li><a href="#">User Profiles</a></li>
        </ul>
      </li>
    </ul>
    <form action="" method="get" name="form1" id="form1">
      <fieldset>
        <legend>Search</legend>
        <label id="searchbox">
          <input type="text" name="s" id="s" />
        </label>
        <input class="hidden" type="submit" name="Submit" value="Search" />
      </fieldset>
    </form>
    <span class="clearFix">&nbsp;</span>
  </div><!-- end of #header -->

  <div id="content">
    <div id="content-top">
      <h2>Dashboard</h2>
      <a href="#" id="topLink">Change Order</a> 
      <span class="clearFix">&nbsp;</span>
    </div><!-- end of div#content-top -->
    <div id="left-col">
      <div class="box">
        <h4 class="yellow">Side Menu</h4>
        <div class="box-container"><!-- use no-padding wherever you need element padding gone -->
          <ul class="list-links">
            <li><a href="#">Manage Filters</a></li>
            <li>
              <a href="#">Setup a New Site</a>
              <ul>
                <li><a href="#">Configure Paths</a></li>
                <li><a href="#">Define Database Name</a></li>
              </ul>
            </li>
            <li><a href="#">Manage Site Accounts</a></li>
          </ul>
        </div><!--end of div.box-container -->
      </div><!-- end of div.box -->

      <div class="box">
        <h4 class="light-blue">System Messages</h4>
        <div class="box-container">
          <div id="sys-messages-container">
            <h5>Latest Messages <span>(Opens Modal)</span></h5>
            <ul>
              <li class="even-messages">
                <a href="#">Where is Everyone? New Stuff i...</a>
                <a href="#" class="sysmessage-delete">
                  <img src="/static/images/icon-delete-message.gif" alt=" " />
                </a>
              </li>
              <li class="odd-messages">
                <a href="#">Version 2 is Online. You can upd...</a>
                <a href="#" class="sysmessage-delete">
                  <img src="/static/images/icon-delete-message.gif" alt=" " />
                </a>
              </li>                      
            </ul>
          </div>

          <div id="quick-send-message-container">
            <h5>Quick Send</h5>

            <form id="form2" name="send-message-form" method="get" action="">
              <fieldset>
                <legend>Quick Send Message</legend>
                <p>
                  <label>Message Title:</label>
                  <input name="message-title" id="message-title" type="text" />
                </p>
                <p>
                  <label>Content:</label>
                  <textarea name="content" cols="10" rows="5"></textarea>
                </p>
                <div class="inner-nav">
                  <div class="align-left">
                    <input name="send-everyone" type="checkbox" value="" />
                    To Everyone
                  </div>
                  <div class="align-right">
                    <a href="#" onclick="javascript:document.forms['send-message-form'].submit();">
                      <span>send</span>
                    </a>
                  </div>
                  <span class="clearFix">&nbsp;</span>
                </div>    
                <input class="hidden" name="button" type="button"
                    value="Send Message" />
              </fieldset>
            </form>
          </div>
        </div><!--end of div.box-container -->
      </div><!--end of div.box -->


      <div class="box" id="to-do">
        <ul class="tab-menu">
          <li><a href="#to-dos">To Do</a></li>
          <li><a href="#completed">Completed</a></li>
        </ul>
        <div class="box-container" id="to-dos">
          <div id="to-do-list">
            <ul>
              <li class="even">
                <input name="check" type="checkbox" value="" />
                <a href="#">To Do Will Open in Modal Box</a><br />
                <small><strong>Deadline:</strong>Today</small>
              </li>
              <li class="odd">
                <input name="check" type="checkbox" value="" />
                <a href="#">To Do Will Open in Modal Box</a><br />
                <small><strong>Deadline:</strong>Today</small>
              </li>

              <li class="even">
                <input name="check" type="checkbox" value="" />
                <a href="#">To Do Will Open in Modal Box</a><br />
                <small><strong>Deadline:</strong>Today</small>
              </li>

              <li class="odd">
                <input name="check" type="checkbox" value="" />
                <a href="#">To Do Will Open in Modal Box</a><br />
                <small><strong>Deadline:</strong>Today</small>
              </li>
            </ul>    
            <div class="inner-nav">
              <div class="align-left">
                <a href="#"><span>view all</span></a>
              </div>
              <div class="align-right">
                <a href="#"><span>to-do config</span></a>
              </div>
              <span class="clearFix">&nbsp;</span>
            </div>       
          </div><!-- end of div#to-do-list -->
        </div><!-- end of div.box-container -->

        <div class="box-container" id="completed">
          Completed tasks div content
        </div>
      </div><!-- end of div.box -->
    </div> <!-- end of div#left-col -->

    <div id="mid-col">

      <div class="box">      
        <h4 class="white">Form Elements</h4>
        <div class="box-container">
          <form action="" method="post" class="middle-forms">
            <h3>Form Title</h3>
            <p>Please complete the form below. Mandatory fields marked
              <em>*</em>
            </p>
            <fieldset>
              <legend>Fieldset Title</legend>
              <ol>
                <li class="even">
                  <label class="field-title">Short Textbox <em>*</em>:</label>
                  <label>
                    <input class="txtbox-short" />
                    <span class="form-confirm-inline">Confirm Message</span>
                  </label>
                  <span class="clearFix">&nbsp;</span>
                </li>

                <li>
                  <label class="field-title">Radio Boxes <em>*</em>: </label>
                  <label>
                    <input type="radio" name="variable" checked="checked" value="val1"/>
                    Radio1 <input type="radio" name="variable" value="val2"/>
                    Radio2
                  </label>
                  <span class="clearFix">&nbsp;</span>
                </li>

                <li  class="even">
                  <label class="field-title">Mid Textbox:</label>
                  <label>
                    <input class="txtbox-middle" />
                    <span class="form-error-inline">Error Message</span>
                  </label>
                  <span class="clearFix">&nbsp;</span>
                </li>

                <li>
                  <label class="field-title">Select Menu:</label>
                  <label>
                    <select class="form-select">
                      <option value="option1">Menu Option 1</option>
                      <option value="option2">Menu Option 2</option>
                    </select>
                  </label>
                  <span class="clearFix">&nbsp;</span>
                </li>

                <li class="even">
                  <label class="field-title">Long Textbox:</label>
                  <label>
                    <input class="txtbox-long" />
                  </label>
                  <span class="clearFix">&nbsp;</span>
                </li>

                <li>
                  <label class="field-title">Checkboxes: </label>
                  <label>
                    <input type="checkbox" name="check_one" value="check1"
                        id="check_one"/> Check
                    <input type="checkbox" name="check_two" value="check2"
                        id="check_two"/> Check
                  </label>
                  <span class="clearFix">&nbsp;</span>
                </li>

                <li class="even">
                  <label class="field-title">Textarea: </label>
                  <label>
                    <textarea id="wysiwyg" rows="7" cols="25"></textarea>
                  </label>
                  <span class="clearFix">&nbsp;</span>
                </li>                  
              </ol><!-- end of form elements -->
            </fieldset>
            <p class="align-right">
              <input type="image" src="/static/images/bt-send-form.gif" />
            </p>
            <span class="clearFix">&nbsp;</span>
          </form>
        </div><!-- end of div.box-container -->
      </div><!-- end of div.box -->

      <div class="box">
        <h4 class="white">Tables
          <a href="2-columns.html" class="heading-link">
            See Full Page Tabbed Tables Example
          </a>
        </h4>
        <div class="box-container">         
          <table class="table-short">
            <thead>
              <tr>
                <td>Col1</td>
                <td>Col2</td>
                <td>Col3</td>
                <td>Col4</td>
              </tr>
            </thead>
            <tfoot>
              <tr>
                <td class="col-chk"><input type="checkbox" /></td>
                <td colspan="4">
                  <div class="align-right">
                    <select class="form-select">
                      <option value="option1">Bulk Options</option>
                      <option value="option2">Delete All</option>
                    </select>
                    <a href="#" class="button">
                      <span>perform action</span>
                    </a>
                  </div>
                </td>
              </tr>
            </tfoot>
            <tbody>
              <tr class="odd">
                <td class="col-chk"><input type="checkbox" /></td>
                <td class="col-first">John Doe</td>
                <td class="col-second"><a href="#">johndoe@mail.com</a></td>
                <td class="row-nav">
                  <a href="#" class="table-edit-link">Edit</a>
                  <span class="hidden"> | </span>
                  <a href="#" class="table-delete-link">Delete</a>
                </td>
              </tr>
              <tr>
                <td class="col-chk"><input type="checkbox" /></td>
                <td class="col-first">Jane Doe</td>
                <td class="col-second"><a href="#">johndoe@mail.com</a></td>
                <td class="row-nav">
                  <a href="#" class="table-edit-link">Edit</a>
                  <span class="hidden"> | </span>
                  <a href="#" class="table-delete-link">Delete</a>
                </td>
              </tr>
              <tr class="odd">
                <td class="col-chk"><input type="checkbox" /></td>
                <td class="col-first">George Livingston</td>
                <td class="col-second"><a href="#">johndoe@mail.com</a></td>
                <td class="row-nav">
                  <a href="#" class="table-edit-link">Edit</a>
                  <span class="hidden"> | </span>
                  <a href="#" class="table-delete-link">Delete</a>
                </td>
              </tr>
              <tr>
                <td class="col-chk"><input type="checkbox" /></td>
                <td class="col-first">Lorem Ipsum Sit Amet</td>
                <td class="col-second"><a href="#">johndoe@mail.com</a></td>
                <td class="row-nav">
                  <a href="#" class="table-edit-link">Edit</a>
                  <span class="hidden"> | </span>
                  <a href="#" class="table-delete-link">Delete</a>
                </td>
              </tr>
              <tr class="odd">
                <td class="col-chk"><input type="checkbox" /></td>
                <td class="col-first">John Doe</td>
                <td class="col-second"><a href="#">johndoe@mail.com</a></td>
                <td class="row-nav">
                  <a href="#" class="table-edit-link">Edit</a>
                  <span class="hidden"> | </span>
                  <a href="#" class="table-delete-link">Delete</a>
                </td>
              </tr>
            </tbody>
          </table>    
        </div><!-- end of div.box-container -->
      </div> <!-- end of div.box -->

    </div><!-- end of div#mid-col -->

    <div id="right-col">
      <div class="box">
        <h4 class="light-grey">Date &amp; Calendar</h4>
        <div class="box-container">
          <div id="date-container">
            <img src="/static/images/sunny.png" alt="Sunny" />
            <span class="hour">22:54</span>
            <span class="date">18th May 2009<br/>Friday</span>
            <span class="clearFix">&nbsp;</span>
          </div><!-- end of div#box-date -->

          <div id="calendar-container">
            <h5>Calendar</h5>
            <div id="calendar"></div>
            <div class="inner-nav">
              <div class="align-left">
                <a href="#">
                  <span>+ add event</span>
                </a>
              </div>
              <div class="align-right">
                <a href="#">
                  <span>? list events</span>
                </a>
              </div>
              <span class="clearFix">&nbsp;</span>
            </div> 
          </div><!-- end of div#calendar-container -->
        </div><!-- end of div.box-container -->  
      </div><!-- end of div.box -->  

      <div class="box">   
        <h4 class="light-blue">Quick Visual Links</h4>
        <div class="box-container">
          <ul id="quick-visual-links">
            <li>
              <a href="#">
                <img src="/static/images/ql-settings.gif" alt="" /><br/>
                Settings
              </a>
            </li>
            <li>
              <a href="#">
                <img src="/static/images/ql-users.gif" alt="" /><br/>
                Users
              </a>
            </li>
            <li>
              <a href="#">
                <img src="/static/images/ql-messages.gif" alt="" /><br/>
                Messages
              </a>
            </li>
            <li>
              <a href="#">
                <img src="/static/images/ql-photos.gif" alt="" /><br/>
                Photos
              </a>
            </li>
            <li>
              <a href="#">
                <img src="/static/images/ql-media.gif" alt="" /><br/>
                Media
              </a>
            </li>
            <li>
              <a href="#">
                <img src="/static/images/ql-design.gif" alt="" /><br/>
                Design
              </a>
            </li>
            <li>
              <a href="#">
                <img src="/static/images/ql-options.gif" alt="" /><br/>
                Options
              </a>
            </li>
            <li>
              <a href="#">
                <img src="/static/images/ql-databases.gif" alt="" /><br/>
                Databases
              </a>
            </li>
            <li>
              <a href="#">
                <img src="/static/images/ql-paths.gif" alt="" /><br/>
                File Paths
              </a>
            </li>   
          </ul>
          <span class="clearFix">&nbsp;</span> 
        </div><!-- end of div.box-container -->            
      </div><!-- end of div.box -->            
    </div><!-- end of div#right-col -->     

    <span class="clearFix">&nbsp;</span>     
  </div><!-- end of div#content -->
  <div class="push">
  </div>
</div><!-- end of #container -->

<div id="footer-wrap">
  <div id="footer">
    <div id="footer-top">
      <div class="align-left">
        <h4>Dashboard</h4>
        <p>
          <a href="#">Dasboard Sub 1</a> |
          <a href="#">Dasboard Sub 2</a> |
          <a href="#">Dasboard Sub 3</a>
        </p>
      </div>
      <div class="align-right">
        <h2><a href="#">Social TV</a></h2>
      </div>
      <span class="clearFix"></span>
    </div><!-- end of div#footer-top -->

    <div id="footer-bottom">
      <p>&copy; 2011 Silas Snider.</p>
    </div>

  </div>
</div>


</body>
</html>
